<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .msg1{width:100px;background: #ccc;display: none;}
        input{width:80px;}

        * { padding: 0; margin: 0; }
        li { list-style: none; }

        .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
        .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
        .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
        .calendar li h2 { font-size: 20px; padding-top: 5px; }
        .calendar li p { font-size: 14px; }

        .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
        .calendar .active p { font-weight: bold; }

        .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
        .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
        .calendar .text p { font-size: 12px; line-height: 18px; }

    </style>
</head>
<body>
    <span class="remember">记住密码</span>
    <div class="msg1">不要在公共区域勾选此项</div>
    <br>
    <!--  -->
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" id="btn" value="添加">
    <table border="1" width="400" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br>
    <!--  -->
    <input type="text" id="password"><span></span>
    <br>
    <!--  -->
    <div id="tab" class="calendar">

        <ul id="box">
            <li><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>FER</p></li>
            <li><h2>3</h2><p>MAR</p></li>
            <li><h2>4</h2><p>APR</p></li>
            <li><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
            <li><h2>7</h2><p>JUL</p></li>
            <li><h2>8</h2><p>AUG</p></li>
            <li><h2>9</h2><p>SEP</p></li>
            <li><h2>10</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
        </ul>
        
        <div class="text" id="txt">
            <h2>月活动</h2>
            <p></p>
        </div>
    </div>
    <br>
    <!--  -->
    <div class="msg3">点击开始按钮，开始点名，再次点击停止</div>
    <input type="button" id="btn3" value="开始">
</body>
<script>
    // 1. 自动登录勾选提示效果
    var oremember = document.querySelector(".remember")
    var omsg1 = document.querySelector(".msg1")

    // 进入
    oremember.onmouseover = function(){
        // 显示
        omsg1.style.display = "block"
    }
    // 离开
    oremember.onmouseout = function(){
        // 延迟
        setTimeout(function(){
            // 隐藏
            omsg1.style.display = "none"
        }, 300)
    }

    // 2. 用户在页面输入信息，点击添加，添加到页面的表格中
    //     - 用户点击表格中的删除，可以删除对应的信息

    var otxt1 = document.getElementById("txt1");
    var otxt2 = document.getElementById("txt2");
    var otxt3 = document.getElementById("txt3");
    var obtn = document.getElementById("btn");
    var otbody = document.getElementsByTagName("tbody")[0];

    // 绑定事件
    obtn.onclick = function(){
        // 创建元素
        var td1 = document.createElement("td")
        var td2 = document.createElement("td")
        var td3 = document.createElement("td")
        var td4 = document.createElement("td")
        var tr = document.createElement("tr")
        // 设置内容
        td1.innerHTML = otxt1.value;
        td2.innerHTML = otxt2.value;
        td3.innerHTML = otxt3.value;
        td4.innerHTML = "删除";
        // 插入元素
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        otbody.appendChild(tr);
        // 情空输入框
        otxt1.value = otxt2.value = otxt3.value = "";
        // 绑定删除按钮的点击事件
        td4.onclick = function(){
            // 删除整行
            tr.remove();
        }
    }

    // 3. 密码强度 - 差，中，强
    //     - 数字，字母，特殊字符
    //         - 任意1种, 差
    //         - 任意2种, 中
    //         - 三种, 难
    //     - 优化强度提示效果
    var opw = document.getElementById("password");
    var omsg2 = opw.nextElementSibling;
    // 输入事件
    opw.oninput = function(){
        // 获取输入框的内容
        var str = this.value;
        // 用来记录是否出现某种类型
        var a=0;
        var b=0;
        var c=0;
        // 循环遍历所有字符
        for(var i=0;i<str.length;i++){
            // 是否出现数字
            if(str[i] >= 0 && str[i] <= 9){
                // 记录
                a = 1;
            }
            // 是否出现字母
            if((str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z")){
                // 记录
                b = 1;
            }
            // 是否出现特殊
            if( !( (str[i] >= 0 && str[i] <= 9) || (str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z") ) ){
                // 记录
                c = 1;
            }
        }
        // 将所有记录累加
        switch(a+b+c){
            // 根据 和，判断出现几种
            case 1:omsg2.innerHTML = "差";break;
            case 2:omsg2.innerHTML = "中";break;
            case 3:omsg2.innerHTML = "强";break;
        }
    }

    // 4. 简易万年历
    var arr=['快过年了，大家可以商量着去哪玩吧～',
		'大家好好学习吧222222~~~',
		'大家好好学习吧222222333~~~',
		'大家好好学习吧222444222~~~',
		'大家好好学习555吧222222~~~',
		'大家好好学习吧666222222~~~',
		'大家好好学习吧227772222~~~',
		'大家好好学习吧28888822222~~~',
		'大家好好学习吧99999222222~~~',
		'大家好好学习10000000吧222222~~~',
		'大家好好学习吧111111222222~~~',
		'大家好好学习吧22222200000000000~~~']
    var ali = document.querySelectorAll("#box li")
    var oh2 = document.querySelector("#txt h2")
    var op = document.querySelector("#txt p")
    // 设置默认值
    var index = 0;
    oh2.innerHTML = index+1 + "月活动";
    op.innerHTML = arr[index];
    ali[index].className = "active"
    // 遍历按钮
    for(var i=0;i<ali.length;i++){
        // 保存索引
        ali[i].index = i;
        // 绑定事件
        ali[i].onclick = function(){
            // 清除之前
            ali[index].className = "";
            // 给当前添加
            this.className = "active";
            oh2.innerHTML = this.index + 1 + "月活动";
            op.innerHTML = arr[this.index];
            // 将本次当前设置为下次的之前
            index = this.index;
        }
    }
    
    // 5. 随机点名
    var omsg3 = document.querySelector(".msg3");
    var obtn3 = document.getElementById("btn3");
    // 名字库
    var arr2 = ["张三","李四","王二","赵五","钱六","admin"];
    // 状态
    var i = 0;
    // 计时器的唯一标志
    var t;
    // 事件
    obtn3.onclick = function(){
        // 判断状态执行对应功能
        if(i === 0){
            // 开始功能
            t = setInterval(function(){
                // 根据随机数随机名字库的索引，将名字设置到指定容器
                omsg3.innerHTML = arr2[random(0, arr2.length-1)]
            }, 30)
            // 改变状态
            i = 1;
            obtn3.value= "暂停"
        }else{
            // 暂停功能
            clearInterval(t);
            // 改变状态
            i = 0;
            obtn3.value= "下一个"
        }
    }


    
    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
</script>
</html>